<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div>
   <table border="1">
     <caption>国产优秀纯电汽车</caption>
     <tr>
       <th>编号</th>
       <th>名字</th>
       <th>价格</th>
       <th>类型</th>
     </tr>
       <!--VUEfor指令遍历 v-for="变量 i in 数组,同时生成当前标签，数量和数组中的对象数量一样"-->
     <tr v-for="(car,i) in arr">
       <td>{{i+1}}</td>
       <td>{{car.name}}</td>
       <td>{{car.price}}</td>
       <td>{{car.type}}</td>
     </tr>
   </table>
   <h1 v-for="car in arr">{{car.name}}</h1>
     <h1 v-for="(a,i) in arr">{{i+1}}</h1>
 </div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({

      el:"div",
      data:{
          arr:[{name:"比亚迪汉EV",price:25000,type:"轿车"},
          {name:"极氪001",price:25000,type:"轿跑"},
          {name:"蔚蓝ET7",price:25000,type:"轿车"},




          ]
      },

    })
</script>
</body>
</html>